<template>
    <h1>toRef和toRefs讲解</h1>
    <div>姓名:{{name}}</div>
    <div>年龄:{{age}}</div>
    <div>妻子:{{wname}}</div>
    <div>岳父:{{wfname}}</div>
    <button @click="updateInfo">修改信息</button>
</template>

<script>
import { reactive,toRef } from 'vue'

export default {
  name:'App',
  setup(){
    const person=reactive({
      name:'Giles',
      age:23,
      wife:{
        name:'Monica',
        father:{
          name:'Johan'
        }
      }
    })
    const updateInfo=()=>{
       person.name="jerry";
       person.age=32;
       person.wife.name="marry";
       person.wife.father.name="jack"
       console.log(toRef(person,'name'));
    }
    
    return{
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      wname:toRef(person.wife,"name"),
      wfname:toRef(person.wife.father,'name'),
      updateInfo,
    }
  }
}
</script>

<style>

</style>